<template>
	<view class="content">
		<view class="pop-title">添加/修改同住人</view>
		<button class="add-btn" @click="addHandel">+添加入住人</button>
		<view class="">
			<scroll-view class="scroll-view" scroll-y>
				<view class="flex justify-between align-center item-box" v-for="(item,index) in list" :key="index">
					<view class="flex align-center" @click="handleSelect(index,item)">
            <image v-if="personIdList.includes(item.personId)" class="select-img"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/disable.png"
                   mode=""></image>
            <image v-else-if="item.select" class="select-img"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/select_.png"
                   mode="" @click="selectHandel(index,item.select)"></image>
            <image v-else-if="!item.select" class="select-img"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/select_no.png"
                   mode="" @click="selectHandel(index,item.select)"></image>
						<view>
							<view class="flex">
								<text class="name">{{item.personName}}</text>
								<view class="default" v-if="item.defaultState=='0'">默认</view>
							</view>
							<view class="tip-text">联系手机：{{item.personPhone}}</view>
							<view class="tip-text">身份证号：{{item.idCard}}</view>
						</view>
					</view>
					<view class="edit" @click="putHandel(item)">
						修改
					</view>
				</view>
			</scroll-view>
		</view>
		<button class="bottom-btn" @click="submit">确定</button>
		<u-popup :show="show" @close="close" @open="open" mode="bottom" round="20" :closeable="true" :closeOnClickOverlay="true">
			<view class="addman-box">
				<view class="pop-title">{{title}}</view>
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80" :labelStyle="labelStyle">
					<u-form-item label="住客姓名" prop="userInfo.name" borderBottom>
						<u--input v-model="form.personName" border="none" :disabled="!!form.personId"></u--input>
					</u-form-item>
					<u-form-item label="身份证号" prop="userInfo.name" borderBottom>
						<u--input v-model="form.idCard" border="none" :disabled="!!form.personId"></u--input>
					</u-form-item>
					<u-form-item label="联系手机" prop="userInfo.name" borderBottom>
						<u--input v-model="form.personPhone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="设为默认" prop="userInfo.name" borderBottom>
						<u-switch  v-model="form.defaultState" :size="15" inactiveValue="1" activeValue="0" activeColor="#19B84E"
							@change="change"></u-switch>
					</u-form-item>
				</u--form>
				<view class="agreement">
					<view class="flex align-center title"><image class="safety-img" src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/safety.png" mode="widthFix"></image>隐私保护</view>
          <ul>
            <li>根据国家相关法律法规，入住经营性质的酒店、民宿，必须提供入住者的身份信息。</li>
            <li>您的身份信息平台会严格保密，仅用于必要的身份核实。</li>
            <li>上述手机号码仅在房东提供入住与相关服务时使用。</li>
          </ul>
				</view>
				<button class="save-btn" @click="savePerson">保存</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import form from '@/uni_modules/uview-ui/libs/config/props/form';
import modal from '@/uni_modules/uview-ui/libs/config/props/modal';
	import {
		personList,
		addPerson,
		putPerson
	} from '@/api/home';
	const getSex = (no = '') => {
		if (!no) return no
		const toStr = no.toString()
		if (toStr.length < 17) return no
		return Number(toStr.substring(16, 17)) % 2 ? '1' : '2' //1男 2女
	}
	export default {
		data() {
			return {
				labelStyle:{
					"font-weight": 500,
					"font-size": "30rpx",
					color: "#666666"
				},
				selectIndex: 0,
				show: false,
        title: '添加入住人',
				form: {
					"personName": "", //入住人姓名
					"personPhone": "", //入住人手机号码
					"idCard": "", //入住人身份证号码
					"sex": "", //性别：1男 2女
					"defaultState": "1" //是否默认（0默认,1非默认）
				},
				rules: [],
				list: []
			}

		},
		props:{
			type:{
				type:String,
				default:'lessee'//lessee承租，roommate同住人
			},
      //最大可添加人数
      maxLength:{
        type:Number,
        default:0
      },
      //当前已添加人数
			length:{
				type:Number,
				default:0
			},
			lesseeId:{
				type:String,
				default:''
			},
      //
      personIdList:{
        default:[]
      }
		},
		created() {
			this.getList();
		},
		methods: {
			selectHandel(index,state){
				if(this.type=='lessee'){
					this.list.map(item=>{
						item.select=false;
					})
					this.list[index].select=true;
				}else{
					this.list[index].select=!state;
				}

			},
      handleSelect(index, data) {
        if(this.personIdList.includes(data.personId)) return;
        if (this.type == 'lessee') {
          this.list.map(item => {
            item.select = false;
          })
          this.list[index].select = true;
        } else {
          this.list[index].select = !data.state;
        }

      },
			getList() {
				personList().then(res => {
					let list=res.data;
					list.map(item=>{
						item.select=false
					})
					this.list = list;
				})
			},
			addHandel(){
				this.form=this.$options.data().form;
        this.title='添加入住人'
				this.show=true;
			},
			savePerson() {
				if (this.form.personId) {
					this.putPerson()
				} else {
					this.addPerson()
				}
			},
			putHandel(row) {
				this.form = JSON.parse(JSON.stringify(row));
				this.show = true;
        this.title = '编辑入住人'
			},
			addPerson() {
				this.form.sex = getSex(this.form.idCard)
				addPerson(this.form).then(res => {
					this.show = false;
					this.getList();
					uni.showToast({
						title:"新增成功"
					})

				})
			},
			putPerson() {
				this.form.sex = getSex(this.form.idCard)
				putPerson(this.form).then(res => {
					this.show = false;
					this.getList();
					uni.showToast({
						title:"编辑成功"
					})
				})
			},
			close() {
				this.show = false;
			},
			open() {

			},
			submit(){
				let result = this.list.filter(item=>item.select === true)
        console.log('result',result)
				// if(result.length<this.length){
				// 	uni.showToast({
				// 		title:'已次添加人数大于可入住人数',
				// 		icon:'none'
				// 	})
				// 	return
				// }
        if(this.length>this.maxLength){
          uni.showToast({
            title:'已添加人数大于最大可添加人数',
            icon:'none'
          })
          return
        }
        if(result.length === 0){
          uni.showToast({
            title:'请选择入住人',
            icon:'none'
          })
          return
        }
				this.$emit('submit',result)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		width: 750rpx;
		height: 1134rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

	}
  .scroll-view{
   height: 800rpx;
  }

	.pop-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin: 40rpx 0 46rpx 0;
	}

	.item-box {
		width: 672rpx;
		margin-left: 38rpx;
		border-bottom: 1px solid rgba(112, 112, 112, 0.1);
		padding-bottom: 36rpx;
		margin-bottom: 28rpx;

		.select-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 36rpx;
		}

		.edit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 22rpx;
			color: #4967D6;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-right: 16rpx;
		}

		.default {
			width: 76rpx;
			height: 36rpx;
			background: #EEEEEE;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			line-height: 36rpx;
			color: #111111;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.tip-text {
		line-height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.bottom-btn {
		position: fixed;
		bottom: 10rpx;
		left: 0;
		width: 690rpx;
		height: 88rpx;
		background: #FF7947;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
		margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
		margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
	}

	.add-btn {
		width: 690rpx;
		height: 94rpx;
		background: rgba(255, 121, 71, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FF7947;
		line-height: 94rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-bottom: 52rpx;
	}

	.addman-box {
		width: 750rpx;
		//height: 906rpx;
    min-height: 906rpx;
    max-height: 100vh;
		padding: 20rpx 30rpx;

	}
	.save-btn{
		width: 690rpx;
		height: 88rpx;
		background: #FF7947;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.agreement{
		width: 690rpx;
		height: 252rpx;
		background: #F7F8FA;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 28rpx 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #9B9B9B;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 42rpx;
		margin-bottom: 70rpx;
		.title{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 16rpx;
		}
		.safety-img{
			width: 20rpx;
			height: 22rpx;
			margin-right: 6rpx;
		}
	}

</style>
